const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // less loader
            {   
                test: /\.less$/,
                use: [
                    // 1. 创建 style 样式，将样式放入
                    // 'style-loader',

                    // 1. 这个 loader 取代 style-loader。作用 提取 JavaScript 中的 css 成单独文件
                    // mini-css-extract-plugin -D
                    MiniCssExtractPlugin.loader,

                    // 2. 将 css 文件整合到 javascript 文件中
                    'css-loader',

                    // 3. 将 less 文件 loader 成 css 文件
                    'less-loader'
                ]

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
}